<template>
<div ref="parent" class="gamemap">
    <canvas ref="canvas"> </canvas>
    <result-borad class="borad" v-if="$store.state.pk.loser != 'none'"/>
    <!-- result-borad可以设置成绝对值的位置  -->
</div>
</template>

<script>
import {GameMap} from "../assets/scripts/GameMap"
import ResultBorad from "@/components/ResultBorad.vue"
import {ref,onMounted} from "vue"
import {useStore} from "vuex"
export default {
    components:{
        ResultBorad,
    },
    setup(){
        let parent = ref(null);
        let canvas = ref(null);
        const store = useStore();
        onMounted( ()=> {
            //这里是将全局变量也传过去了,js里面才能用
            store.commit(
                "updateGameObject",
                new GameMap(canvas.value.getContext('2d'),parent.value,store)
            );
        });

        return{
            parent,
            canvas
        }
    }    
}
</script>

<style scoped>
div.gamemap{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.borad{
    position: absolute;
    top: 50%;
    left: 50%;
    /* 关键：通过transform反向偏移自身50%实现居中 */
    transform: translate(-50%, -50%);
}
</style>